import { useState, createElement } from 'react'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import { AdminContainer } from './style'
import menuConfig from '../../config/menuConfig'
import { createChildrenAdminRoute } from '../../router'

const { Header, Sider, Content } = Layout

const Admin = ({ history }) => {
  const [collapsed, setCollapsed] = useState(false)
  return (
    <AdminContainer>
      <Layout style={{ minHeight: '100%' }}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="inline"
            // 默认选中的菜单项，他只会在初始化的时候执行一次
            defaultSelectedKeys={['1']}
            onClick={({ key }) => {
              history.push(key)
            }}
            items={menuConfig}
          />
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
            }}
          >
            {createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {/* 这里是路由 */}
            {createChildrenAdminRoute()}
          </Content>
        </Layout>
      </Layout>
    </AdminContainer>
  )
}

export default Admin
